<template>
	<div class="template1-private-detail-wrap" v-show="private" :class="[private?'move-in-left':'move-in-right',{'face-active':$parent.emojiShow}]">
		<div class="bg-cover" style="background-color: rgba(0, 0, 0, 0.4)" @click="closePopup"></div>
		<div class="template1-private-detail-inner-wrap">
			<div class="private-header-wrap border-1px" v-if="$parent.selectedItem"><i class="icon-back" @click="closePopup"></i>{{$parent.selectedItem.appdata.nickname}}</div>
			<div class="private-chat-content-wrap" ref="chatContent">
				<ul class="private-chat-content-ul" v-if="$parent.selectedItem && privateChatMap[$parent.selectedItem.uid]">
					<li class="private-chat-li" :class="[item.from_uid === $parent.xmessager.uid?'my-message':'other-message']" v-for="(item,index) in privateChatMap[$parent.selectedItem.uid]" :key="index">
						<div class="chat-system-time" v-if="item.showTime"><span>{{item.time | parseTime}}</span></div>
						<div class="chat-user">
							<span class="userrand">
							  <i v-if="item.from_level === 500"
							     class="teacher"></i>
							  <i v-else-if="item.from_level === 900"
							     class="admin"></i>
							  <i v-else-if="item.from_level === 2000"
							     class="shi"></i>
							  <i v-else-if="item.from_level === 4000"
							     class="tuan"></i>
							  <i v-else-if="item.title <= 12"
							     :class="'rank'+item.title"></i>
							  <i v-else-if="item.title > 12"
							     class="rank12"></i>
							</span>
							<span class="nikename">{{item.from_nickname}}</span>
						</div>
						<div class="chat-text">
							<span class="content" v-html="item.message"></span>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	import { parseTime } from '@/utils'
	import SmartScroll from '@/utils/SmartScroll'
	export default{
		name:'Template1NewPrivateChat',
		computed:{
			...mapGetters([
				'privateChatMap',
				'privateChatArray'
			])
		},
		filters:{
			parseTime(val){
				return parseTime(val,'{h}:{i}:{s}')
			}
		},
		props:{
			private:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return{
				privateListShow:true,
				selectedItem:null,
				checkLevelFlag:false,
				detailShow:false
			}
		},
		methods:{
			closePopup(){
				this.$emit('close')
			}
		},
		mounted(){
			//fix ios overscroll-behavior
			new SmartScroll(this.$el,this.$refs.chatContent)
		}
	}
</script>

<style lang="scss" scoped>
	.template1-private-detail-wrap{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 52px;
		z-index: 13;
		transition: transform .25s;
		&.face-active{
			transform: translateY(- 12.5rem);
		}
	}
	.template1-private-detail-inner-wrap{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		.private-header-wrap{
			position: relative;
			height: 3rem;
			line-height: 3rem;
			padding: 0 0.93rem;
			background-color: #fff;
			font-size: 1rem;
			text-align: center;
			// @include  border-1px;
			.icon-back{
				position: absolute;
				width: 1.5rem;
				height: 2.5rem;
				left: 1.56rem;
				top:0;
				bottom:0;
				margin: auto;
				transform: scale(.5);
				@include setFixedBackground('../../../../../assets/images/icon-back@2x.png');
			}
		}
		.private-chat-content-wrap{
			height: 18rem;
			padding: 0.93rem;
			overflow-y: auto;
			overflow-x: hidden;
			background-color: #eee;
			-webkit-overflow-scrolling: touch;
			box-sizing: border-box;
		}
		.chat-user,.chat-text{
			display: inline-block;
			vertical-align: top;
			font-size: 15px;
		}
		.chat-user{
			font-size: 12px;
			color: #999;
		}
		.private-chat-li{
			position: relative;
			font-size: 0;
			margin-bottom: 0.62rem;
			min-height: 4.25rem;
			.chat-system-time{
				margin: 0.31rem 0;
				padding: 0;
				text-align: center;
				span{
					display: inline-block;
					line-height: 1.87rem;
					padding: 0 0.93rem;
					border-radius: 0.18rem;
					background-color: #ddd;
					color: #fff;
					font-size: 0.87rem;
					cursor: pointer;
				}
			}
			.chat-user{
				position: absolute;
			}
			.chat-text{
				position: relative;
				line-height: 1.37rem;
				margin-top: 2rem;
				padding: 0.5rem 0.93rem;
				background-color: #fff;
				border-radius: 3px;
				color: #333;
				word-break: break-all;
				text-align: left;
				&::after{
					content: '';
					position: absolute;
					width: 0;
					right: 0;
					border-style: solid;
					border-color: transparent transparent white;
					border-width: 0.62rem 0.5rem;
					top: -1rem;
					left: 0.62rem;
					right: auto;
					display: none;
				}
			}
			&.my-message{
				text-align: right;
				.chat-user{
					right: 0;
				}
				.chat-text{
					background-color: #cdd5ff;
					color: #fff;
					&::after{
						border-bottom-color: #cdd5ff;
						right: 0.5rem;
						left: auto;
					}
				}
			}
		}
	}
</style>
